<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- 引入 bootstrap 样式表 -->
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    body {
      padding-top: 50px;
    }
  </style>
</head>

<body>
  <!-- 栅格系统 -->
  <div class="container">
    <div class="d-flex justify-content-between align-items-center">
      <h1>图书管理</h1>
      <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addModal">添加</button>
    </div>
    <table class="table table-bordered table-striped table-dark table-hover text-center">
      <thead>
        <!-- 表头行 -->
        <tr>
          <th scope="col">Id</th>
          <th scope="col">书名</th>
          <th scope="col">作者</th>
          <th scope="col">出版社</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 表格中的每一行 -->
        <!-- <tr>
          <th scope="row">xxx</th>
          <td>xxx</td>
          <td>xxx</td>
          <td>xxx</td>
          <td>
            <button type="button" class="btn btn-link btn-sm btn-delete">删除</button>
            <button type="button" class="btn btn-link btn-sm btn-update">编辑</button>
          </td>
        </tr> -->
      </tbody>
    </table>
  </div>
  <!-- add Modal -->
  <div class="modal fade" id="addModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加图书</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="addForm" class="p-3">
            <!-- 书名 -->
            <div class="mb-3">
              <label class="form-label">书名</label>
              <input type="text" name="bookname" class="form-control" placeholder="请输入图书名称" name="bookname" />
            </div>
            <!-- 作者 -->
            <div class="mb-3">
              <label class="form-label">作者</label>
              <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
            </div>
            <!-- 出版社 -->
            <div class="mb-3">
              <label class="form-label">出版社</label>
              <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称" name="publisher" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="addBtn">确认</button>
        </div>
      </div>
    </div>
  </div>
  <!-- edit Modal -->
  <div class="modal fade" id="editModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">编辑图书</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="editForm" class="p-3">
            <input type="hidden" name="id" />
            <!-- 书名 -->
            <div class="mb-3">
              <label class="form-label">书名</label>
              <input type="text" name="bookname" class="form-control" placeholder="请输入图书名称" name="bookname" />
            </div>
            <!-- 作者 -->
            <div class="mb-3">
              <label class="form-label">作者</label>
              <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
            </div>
            <!-- 出版社 -->
            <div class="mb-3">
              <label class="form-label">出版社</label>
              <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称" name="publisher" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="editBtn">确认</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 引入 lib 目录下的 bootstrap 和 axios -->
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-value.js"></script>
  <script src="./lib/bootstrap.min.js"></script>
  <script>
    // ----------------------------- 1. 获取服务器上的数据，渲染到表格中 -------------------------
    function renderBooks() {
      // 1. 发送ajax请求，获取服务器上的图书数据
      axios({
        method: 'GET',
        url: 'http://www.itcbc.com:3006/api/getbooks',
        params: {
          appkey: 'laotang0099'
        }
      }).then(({ data: res }) => {
        // console.log(res) // { status: 0, message: 'xxx', data: [......] }
        // 2. 循环遍历，将数据渲染到表格中
        console.log(res.data)
        let aa = res.data.map(item => {
          return `
            <tr>
              <th scope="row">${item.id}</th>
              <td>${item.bookname}</td>
              <td>${item.author}</td>
              <td>${item.publisher}</td>
              <td>
                <button data-id="${item.id}" type="button" class="btn btn-link btn-sm btn-delete">删除</button>
                <button 
                data-id="${item.id}" 
                data-bookname="${item.bookname}"
                data-author="${item.author}"
                data-publisher="${item.publisher}" 
                type="button" class="btn btn-link btn-sm btn-update">编辑</button>
              </td>
            </tr>
            `
        })   // ['<tr>...</tr>', '<tr>...</tr>', '<tr>...</tr>', '<tr>...</tr>', '<tr>...</tr>', .....]
        // console.log(aa.join(''))
        document.querySelector('tbody').innerHTML = aa.join('')
      })
    }

    renderBooks()


    // ------------------------- 2. 添加一本书 ---------------------------------
    document.querySelector('#addBtn').addEventListener('click', function () {
      // 获取三个输入框的值
      let bookname = document.querySelector('#addForm [name=bookname]').value
      let author = document.querySelector('#addForm [name=author]').value
      let publisher = document.querySelector('#addForm [name=publisher]').value
      // console.log(bookname, author, publisher)
      // 发送ajax请求，提交数据给服务器
      axios({
        method: 'POST',
        url: 'http://www.itcbc.com:3006/api/addbook',
        data: { bookname, author, publisher, appkey: 'laotang0099' }  // 对象的键和值如果同名，写一份即可，这是ES6的新规定
        // data: {
        //   bookname: bookname,
        //   author: author,
        //   publisher: publisher
        // }
      }).then(({ data: res }) => {
        console.log(res)
        // 添加成功，重新获取全部图书，重新渲染，这样的话，就会把最新添加的图书获取到。
        renderBooks()
        // 关闭弹出层(找到添加模态框里面的关闭按钮，触发它的单击事件)（用代码的方式，点一下关闭按钮）
        document.querySelector('#addModal .btn-close').click()
      })
    })


    // ------------------------------------ 3. 删除功能 ----------------------------------
    // 实例化编辑的模态框
    let editModal = new bootstrap.Modal(document.querySelector('#editModal'))

    // 1. 使用事件委托的方式，为删除添加单击事件
    document.querySelector('tbody').addEventListener('click', function (e) {
      // console.log(e.target.classList.contains('btn-delete'))
      // 判断，点击的目标元素，是否包含 btn-delete 这个类名（如果包含，说明点击的是删除）
      if (e.target.classList.contains('btn-delete')) {
        // 2. 点击的时候，获取到当前这条数据的id（循环遍历的时候，给每个删除添加 data-id 属性；点击删除的时候获取这个属性值）
        let id = e.target.dataset.id
        // console.log(id)
        // 3. 发送请求，删除数据
        axios({
          method: 'DELETE',
          url: 'http://www.itcbc.com:3006/api/delbook',
          params: {
            id: id,
            appkey: 'laotang0099'
          }
        }).then(({ data: res }) => {
          // console.log(res)
          renderBooks() // 调用renderBooks() 重新获取最新的数据，重新渲染到页面中
        })
      }

      // 判断，点击的目标元素是否是编辑按钮
      if (e.target.classList.contains('btn-update')) {
        // 让模态框显示
        editModal.show()
        // 获取编辑按钮的 4 个自定义属性
        let shuju = e.target.dataset
        // console.log(shuju) // {id: '2896', bookname: '遮天三部曲', author: '振东', publisher: '红毛怪'}
        // 数据回填（找到编辑弹框中的 input，然后设置value值）
        document.querySelector('#editModal [name=bookname]').value = shuju.bookname
        document.querySelector('#editModal [name=author]').value = shuju.author
        document.querySelector('#editModal [name=publisher]').value = shuju.publisher
        document.querySelector('#editModal [name=id]').value = shuju.id
      }
    })

  </script>
</body>

</html>